<!--
 * @Author: FanWeiHua
 * @Date: 2021-08-02 10:05:19
 * @LastEditTime: 2021-08-02 10:43:49
 * @Description: demo3
-->
<template>
  <section>
    <!-- <n-space align="baseline">
      <n-button size="tiny">小小</n-button>
      <n-button size="small">小</n-button>
      <n-button size="medium">不小</n-button>
      <n-button size="large">不不小</n-button>
    </n-space>
    <n-space>
      <n-button>Default</n-button>
      <n-button type="primary">Primary</n-button>
      <n-button type="info">Info</n-button>
      <n-button type="success">Success</n-button>
      <n-button type="warning">Warning</n-button>
      <n-button type="error">Error</n-button>
    </n-space>
    <n-space>
      <n-card title="卡片插槽示例">
        <template #header-extra> #header-extra </template>
        卡片内容
        <template #footer> #footer </template>
        <template #action> #action </template>
      </n-card>
    </n-space>
    <n-space style="width: 500px">
      <n-carousel show-arrow>
        <img class="carousel-img" src="https://s.anw.red/fav/1623979004.jpg!/fw/600/quality/77/ignore-error/true" />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623372884.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623177220.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
        <img
          class="carousel-img"
          src="https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
        />
      </n-carousel>
    </n-space>
    <n-space>
      <n-collapse>
        <n-collapse-item title="青铜" name="1">
          <div>可以</div>
        </n-collapse-item>
        <n-collapse-item title="白银" name="2">
          <div>很好</div>
        </n-collapse-item>
        <n-collapse-item title="黄金" name="3">
          <div>真棒</div>
        </n-collapse-item>
      </n-collapse>
    </n-space>
    <n-space>
      <n-dropdown trigger="hover" :options="options">
        <n-button>找个地方休息</n-button>
      </n-dropdown>
    </n-space>
    <n-space>
      <n-ellipsis style="max-width: 240px">
        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
      </n-ellipsis>
    </n-space>
    <n-space>
      <n-tag> 爱在西元前 </n-tag>
      <n-tag type="success"> 不该 </n-tag>
      <n-tag type="warning"> 超人不会飞 </n-tag>
      <n-tag type="error"> 手写的从前 </n-tag>
      <n-tag type="info"> 哪里都是你 </n-tag>
    </n-space> -->
    <n-space>
      <n-auto-complete :options="options" v-model:value="value" placeholder="邮箱" />
    </n-space>
  </section>
</template>
<script>
import {
  NButton,
  NSpace,
  NCard,
  NCarousel,
  NCollapse,
  NCollapseItem,
  NDropdown,
  NEllipsis,
  NTag,
  NAutoComplete
} from 'naive-ui';
import { computed, ref } from 'vue';
export default {
  setup() {
    const valueRef = ref('');
    return {
      value: valueRef,
      // options: [
      //   {
      //     label: '滨海湾金沙，新加坡',
      //     key: 'marina bay sands',
      //     disabled: true
      //   },
      //   {
      //     label: '布朗酒店，伦敦',
      //     key: "brown's hotel, london"
      //   },
      //   {
      //     label: '亚特兰蒂斯巴哈马，拿骚',
      //     key: 'atlantis nahamas, nassau'
      //   },
      //   {
      //     label: '比佛利山庄酒店，洛杉矶',
      //     key: 'the beverly hills hotel, los angeles'
      //   }
      // ],
      options: computed(() => {
        return [
          ['谷歌', '@gmail.com'],
          ['网易', '@163.com'],
          ['腾讯', '@qq.com']
        ].map(emailInfo => {
          return {
            type: 'group',
            label: emailInfo[0],
            key: emailInfo[0],
            children: [valueRef.value.split('@')[0] + emailInfo[1]]
          };
        });
      })
    };
  },
  components: {
    NButton,
    NSpace,
    NCard,
    NCarousel,
    NCollapse,
    NCollapseItem,
    NDropdown,
    NEllipsis,
    NTag,
    NAutoComplete
  }
};
</script>
<style>
.n-collapse {
  width: 500px;
}
</style>
